<template>
  <div class="page">
    <el-form :inline="true" v-if="searchVisible" class="query-form m-b-10" ref="searchForm" :model="searchForm" @keyup.enter="refreshList()" @submit.prevent>
      <!-- 搜索框-->
      <el-form-item prop="project.id" label="项目id：">
        <GridSelect title="选择项目id" placeholder="请选择项目id" labelName='projectName' labelValue='id' v-model="searchForm.project.id" :limit="1" :columns="[
                            {
                              prop: 'id',
                              label: '主键'
                            },
                            {
                              prop: 'projectName',
                              label: '项目名称'
                            }
                            ]" :searchs="[
                            {
                              prop: 'projectName',
                              label: '项目名称'
                            }
                            ]" :api="projectMainService">
        </GridSelect>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
        <el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="jp-table">
      <vxe-toolbar ref="projectInitiationToolbar" :refresh="{query: refreshList}" import export print custom>
        <template #buttons>
          <el-button v-if="hasPermission('initiation:projectInitiation:add')" type="primary" icon="plus" @click="add()">新建</el-button>
          <el-button v-if="hasPermission('initiation:projectInitiation:edit')" type="warning" icon="edit-filled" @click="edit()"
            v-show="$refs.projectInitiationTable && $refs.projectInitiationTable.getCheckboxRecords().length === 1" plain>修改</el-button>
          <el-button v-if="hasPermission('initiation:projectInitiation:del')" type="danger" icon="del-filled" @click="del()"
            v-show="$refs.projectInitiationTable && $refs.projectInitiationTable.getCheckboxRecords().length > 0" plain>删除</el-button>
        </template>
        <template #tools>
          <vxe-button type="text" :title="
              searchVisible ? '收起检索' : '展开检索'
            " icon="vxe-icon-search" class="tool-btn" @click="searchVisible = !searchVisible"></vxe-button>
          <vxe-button type="text" title="下载导入模板" v-if="hasPermission('initiation:projectInitiation:import')" icon="vxe-button--icon vxe-icon-file-excel"
            class="tool-btn m-l-0" @click="downloadTpl()">
          </vxe-button>
        </template>
      </vxe-toolbar>
      <div class="jp-table-body">
                            
       <el-table :data="[]" style="width: 100%">
         <el-table-column label="上家合同">
          <el-table-column prop="name" label="序号" width="120" />
          <el-table-column prop="name" label="分公司" width="120" />
             <el-table-column prop="name" label="项目名称" width="120" />
                <el-table-column prop="name" label="项目类型" width="120" />
                   <el-table-column prop="name" label="集团内（外）" width="120" />
                      <el-table-column prop="name" label="合同签订方" width="120" />
                         <el-table-column prop="name" label="签订时间" width="120" />
                            <el-table-column prop="name" label="合同金额(含税)" width="120" />
                               <el-table-column prop="name" label="不含税金额" width="120" />
                                  <el-table-column prop="name" label="税率" width="120" />
                                     <el-table-column prop="name" label="成本预算金额" width="120" />
                                        <el-table-column prop="name" label="预计项目利润" width="120" />
                                           <el-table-column prop="name" label="计量金额" width="120" />
                                              <el-table-column prop="name" label="结算金额" width="120" />
                                               <el-table-column prop="name" label="开票金额" width="120" />
                                                <el-table-column prop="name" label="回款金额" width="120" />
                                                 <el-table-column prop="name" label="回款比例" width="120" />
                                                  <el-table-column prop="name" label="合同工期" width="120" />
                                                   <el-table-column prop="name" label="项目状态" width="120" />
                                                    <el-table-column prop="name" label="项目所处阶段" width="120" />
                                                     <el-table-column prop="name" label="开工时间" width="120" />
                                                      <el-table-column prop="name" label="交工时间" width="120" />
                                                       <el-table-column prop="name" label="竣工时间" width="120" />
        </el-table-column>
        <el-table-column label="下家合同">
          <el-table-column prop="name" label="序号" width="120" />
         <el-table-column prop="name" label="招采核准项目" width="120" />
         <el-table-column prop="name" label="类型" width="120" />
         <el-table-column prop="name" label="采购方式" width="120" />
         <el-table-column prop="name" label="公告时间" width="120" />
         <el-table-column prop="name" label="中标时间" width="120" />
         <el-table-column prop="name" label="采购限价" width="120" />
         <el-table-column prop="name" label="合同名称" width="120" />
         <el-table-column prop="name" label="合同签订方" width="120" />
         <el-table-column prop="name" label="是否为交控集团内部单位" width="120" />
        <el-table-column prop="name" label="合同金额" width="120" />
         <el-table-column prop="name" label="签订时间" width="120" />
         <el-table-column prop="name" label="税率" width="120" />
              <el-table-column prop="name" label="下家合同金额小计" width="120" />
                   <el-table-column prop="name" label="开票金额" width="120" />
                        <el-table-column prop="name" label="本次支付金额" width="120" />
                            <el-table-column prop="name" label="本次支付比例" width="120" />
                                <el-table-column prop="name" label="累计支付金额" width="120" />
                                    <el-table-column prop="name" label="累计支付比例" width="120" />
                                            <el-table-column prop="name" label="实际项目利润率" width="120" />
        </el-table-column>
      </el-table>

      </div>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <ProjectInitiationForm ref="projectInitiationForm" @refreshDataList="refreshList"></ProjectInitiationForm>
  </div>
</template>
  
  <script>
import ProjectInitiationForm from './ProjectStatisticsForm'
import projectInitiationService from '@/api/initiation/projectInitiationService'
import GridSelect from '@/components/gridSelect'
import projectMainService from '@/api/project/projectMainService'
export default {
  data() {
    return {
      searchVisible: true,
      searchForm: {
        project: {
          id: ''
        }
      },
      projectMainService: projectMainService,
      dataList: [],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        orders: [{ column: "a.create_time", asc: false }],
      },
      loading: false
    }
  },
  components: {
    GridSelect,
    ProjectInitiationForm
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      // 将表格和工具栏进行关联
      const $table = this.$refs.projectInitiationTable
      const $toolbar = this.$refs.projectInitiationToolbar
      $table.connect($toolbar)
    })
  },
  activated() {
    this.refreshList()
  },
  methods: {
    // 获取数据列表
    refreshList() {
      // this.loading = true
      // projectInitiationService.list({
      //   'current': this.tablePage.currentPage,
      //   'size': this.tablePage.pageSize,
      //   'orders': this.tablePage.orders,
      //   ...this.searchForm
      // }).then((data) => {
      //   this.dataList = data.records
      //   this.tablePage.total = data.total
      //   this.loading = false
      // })
    },
    // 当前页
    currentChangeHandle({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.refreshList()
    },
    // 排序
    sortChangeHandle(obj) {
      this.tablePage.orders = [];
      if (obj.order != null) {
        this.tablePage.orders = [{ column: obj.column.sortBy || this.$utils.toLine(obj.property), asc: obj.order === "asc" }];
      } else {
        this.tablePage.orders = [{ column: "a.create_time", asc: false }];
      }
      this.refreshList();
    },
    // 新增
    add() {
      this.$refs.projectInitiationForm.init('add', '')
    },
    // 修改
    edit(id) {
      id = id || this.$refs.projectInitiationTable.getCheckboxRecords().map(item => {
        return item.id
      })[0]
      this.$refs.projectInitiationForm.init('edit', id)
    },
    // 查看
    view(id) {
      this.$refs.projectInitiationForm.init('view', id)
    },
    // 删除
    del(id) {
      let ids = id || this.$refs.projectInitiationTable.getCheckboxRecords().map(item => {
        return item.id
      }).join(',')
      this.$confirm(`确定删除所选项吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        projectInitiationService.delete(ids).then((data) => {
          this.$message.success(data)
          this.refreshList()
          this.loading = false
        })
      })
    },
    // 下载模板
    downloadTpl() {
      this.loading = true
      projectInitiationService
        .exportTemplate()
        .then((data) => {
          // 将二进制流文件写入excel表，以下为重要步骤
          this.$utils.downloadExcel(data, "项目立项导入模板");
          this.loading = false
        })
        .catch(function (err) {
          this.loading = false
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    // 自定义服务端导入
    importMethod({ file }) {
      // 处理表单
      const formBody = new FormData();
      formBody.append("file", file);
      this.loading = true
      projectInitiationService.importExcel(formBody).then((result) => {
        this.$message.success({
          dangerouslyUseHTMLString: true,
          message: result,
        });
        this.refreshList();
      });
    },
    // 自定义服务端导出
    exportMethod({ options }) {
      // 传给服务端的参数
      const params = {
        current: this.tablePage.currentPage,
        size: this.tablePage.pageSize,
        orders: this.tablePage.orders,
        ...this.searchForm,
        filename: options.filename,
        sheetName: options.sheetName,
        isHeader: options.isHeader,
        original: options.original,
        mode: options.mode,
        selectIds:
          options.mode === "selected"
            ? options.data.map((item) => item.id)
            : [],
        exportFields: options.columns.map(
          (column) => column.property && column.property.split(".")[0]
        ),
      };
      this.loading = true;
      return projectInitiationService
        .exportExcel(params)
        .then((data) => {
          // 将二进制流文件写入excel表，以下为重要步骤
          this.$utils.downloadExcel(data, options.filename);
          this.loading = false;
        })
        .catch(function (err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    resetSearch() {
      this.$refs.searchForm.resetFields()
      this.refreshList()
    }
  }
}
  </script>
  
  